<template>
  <div class="continter" v-loading="pageData.loading">
    <div class="flex heightBox">
      <div class="flex mr-20 h-left back-fff w-50">
        <img src="/src/assets/jflogo.png" alt="" class="avarat" />
        <div style="display: flex; flex-flow: column wrap">
          <div class="ninkName"
            >欢迎你：{{ list.nickName
            }}{{ list.empMap && list.empMap.code ? '-' + list.empMap.code : '' }}
          </div>
          <div class="ninkName">公司：{{ list.firmName }}</div>
          <div class="ninkName">部门：{{ list.department }}</div>
          <div class="ninkName"
            >职称：{{ list.empMap && list.empMap.postName ? list.empMap.postName : '' }}</div
          >
        </div>
        <div style="width: 25%; height: 75%">
          <img src="../../assets/homeLogo.png" style="width: 100%; height: 100%" alt="" />
        </div>
      </div>
      <div class="flex h-right w-50">
        <div class="mr-20 hr-left w-50 back-fff">
          <!-- <div class="address"
                    >城市：
                        <el-select-v2
                                filterable
                                :options="options"
                                placeholder="请选择城市"
                                style="width: 300px"
                                v-model="address"
                                @change="addressChange"
                        />
                    </div> -->
          <!-- <div class="flex tianqi">
                        <div class="address">{{ address }}</div>
                        <div class="ssd">{{ weather.temperature }}°C</div>
                        <div class="weather">{{ weather.weather }}</div>
                        <div class="flex evenly-center">
                            <span>空气湿度：{{ weather.humidity }}%</span>
                            <span>风力级别：{{ weather.windpower }}级</span>
                            <span>风向：{{ weather.winddirection }}</span>
                        </div>
                    </div> -->
        </div>
        <div class="hr-right w-50 back-fff">
          <el-calendar />
        </div>
      </div>
    </div>
    <div class="flex mt-20 console back-fff">
      <h7 style="margin-left: 30px">控制台：</h7>
      <template v-for="(item, index) in pageData.menuList" :key="index">
        <!-- <div v-if="item.icon != 'icon-settings'"
                     class="IconFont"
                     @click="fontClick(item)"
                >
                    <div>
                        <IconFont
                                :type="item.icon"
                                style="width: 30px; height: 30px"
                        ></IconFont>
                    </div>
                    {{item.menuName}}
                </div> -->
        <div
          v-if="item.icon != 'icon-settings'"
          class="IconFont scrollbar-demo-item"
          @click="fontClick(item)"
        >
          <div>
            <IconFont
              :type="item.icon"
              style="width: 30px; height: 30px; margin-left: 0px"
            ></IconFont>
            <div style="font-size: 14px; width: 100px; margin-top: 6px; color: #5191fd">
              {{ item['menuName'] }}
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="flex mt-20 heightMain">
      <div class="mr-20 hm-left w-50 back-fff">
        <div class="flex title-left">
          <span class="title-yuan"></span>
          <div>待完成任务</div>
        </div>
        <div class="rw">待完成任务1</div>
        <div class="rw">待完成任务2</div>
        <div class="rw">待完成任务3</div>
      </div>
      <div class="hm-right w-50 back-fff">
        <div class="flex title-left">
          <span class="title-yuan" style="background: #5091fd"></span>
          <div>待完成任务</div>
        </div>
        <div class="rw">待完成任务1</div>
        <div class="rw">待完成任务2</div>
        <div class="rw">待完成任务3</div>
      </div>
    </div>
    <div class="flex mt-20 console back-fff">
      <div style="margin-left: 20px; width: 120px">常用报表入口:</div>
      <el-scrollbar style="width: 90%">
        <div class="scrollbar-flex-content">
          <template v-for="(item, index) in reportObList" :key="index">
            <p class="scrollbar-demo-item" v-if="qxIfFunction(item['qx'])">
              <router-link
                v-if="!item['menuPath'].startsWith('/')"
                :to="{ name: item['menuPath'], params: { id: item['idKey'] } }"
              >
                <div class="IconFont scrollbar-demo-item">
                  <div>
                    <IconFont
                      :type="item['iconPath']"
                      style="width: 30px; height: 30px; margin-left: 0px"
                    ></IconFont>
                    <div style="font-size: 12px; width: 100px; color: #5191fd">
                      {{ item['menuName'] }}
                    </div>
                  </div>
                </div>
              </router-link>
              <router-link :to="{ path: item['menuPath'] }" v-else>
                <div class="IconFont scrollbar-demo-item">
                  <div>
                    <IconFont
                      :type="item['iconPath']"
                      style="width: 30px; height: 30px; margin-left: 0px"
                    ></IconFont>
                    <div style="font-size: 12px; width: 100px; color: #5191fd">
                      {{ item['menuName'] }}
                    </div>
                  </div>
                </div>
              </router-link>
            </p>
          </template>
        </div>
      </el-scrollbar>
    </div>
    <div class="flex mt-20 runningAway back-fff">
      <span class="xinhao">*</span>
      <span>
        <!-- 您有一条推送：中国质量新闻网讯，据信用中国（广东广州）网站信息，近日，噼里啪啦，噼里啪啦，噼里啪啦，噼里啪啦，噼里啪啦，噼里啪啦 -->
      </span>
    </div>
  </div>
  <a-modal
    :visible="pwdData.changePwd"
    title="重置密码"
    @ok="changePasswordHandler"
    :hide-cancel="true"
    :closable="false"
  >
    <a-form :model="pwdData" ref="formRef">
      <a-form-item label="账号">
        <a-input class="bacClass" v-model="pwdData.username" disabled></a-input>
      </a-form-item>
      <a-form-item label="密码" field="pwd" :validate-trigger="['change', 'blur']"
          :rules="[{ required: true, message: '密码必填' }]">
        <a-input class="bacClass" type="password" v-model="pwdData.pwd" placeholder=" "></a-input>
      </a-form-item>
      <a-form-item label="确认密码" field="confirmPwd" :validate-trigger="['change', 'blur']"
          :rules="[{ required: true, message: '确认密码必填' }]">
        <a-input
          class="bacClass"
          type="password"
          v-model="pwdData.confirmPwd"
          placeholder=" "
        ></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal
    title-align="start"
    mask="false"
    :hide-cancel="true"
    ok-text="关闭"
    :maskClosable="false"
    v-model:visible="pwdData.visiblePwd"
    @ok="handlePwdOk"
    @cancel="pwdData.visiblePw = false"
  >
    <template #title> 重置账号密码详情 </template>
    <div style="text-align: center">
      <span style="margin-right: 20px">账号:{{ pwdData.username }}</span>
      <span>密码:{{ pwdData.pwd }}</span>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import useUserStore from '@/store/modules/user'
import { ElMessage } from 'element-plus'
import { post, get } from '@/api/http'
import axios from 'axios'
import { Icon, Message } from '@arco-design/web-vue'
import { pr, city } from './city'
import { reportObList } from './mainReport'
import md5 from 'js-md5'

const IconFont = Icon.addFromIconFontCn({
  src: '/public/static/font/iconfont.js',
})
import { useRouter } from 'vue-router'

const router = useRouter()

interface Pagein {
  loading: boolean
  menuList: any
  reportMenuList: any
}

// // 省市级联
// const weather = ref({})
// const address = ref('广东省佛山市')
// const addressChange = async (val: string) => {
//     try {
//         pageData.loading = true
//         let {code, message, data} = await get({
//             url: 'appVersion/weather/getWeatherInfo?address=' + address.value,
//         })
//         if (code == 200) {
//             weather.value = data
//             pageData.loading = false
//             return
//         }
//         ElMessage.error(message)
//     } finally {
//         pageData.loading = false
//     }
// }
// 跟请求参数无关的放这里
let pageData = reactive<Pagein>({
  loading: false,
  menuList: [],
  reportMenuList: [],
})
const list = ref({
  empMap: {
    code: '',
  },
  nickName: '',
})
const options = pr.map((item: any) => {
  return {
    value: item.id,
    label: item.text,
    options: city
      .filter((item1) => {
        return item.text == item1.pid
      })
      .map((shen: any) => {
        return {
          value: item.text + shen.text + '市',
          label: item.text + ' ' + shen.text + '市',
        }
      }),
  }
})
const rangeCalendar = ref([])
const getUserInfo = async () => {
  try {
    pageData.loading = true
    let { code, data, message } = await post({
      url: '/admin/acl/user/findUserToken',
    })
    if (code == 200) {
      pwdData.curId = data.data.id
      console.log(data.data.userName)
      pwdData.username = data.data.userName
      userTimeOut()
      list.value = data.data
      pageData.loading = false
      return
    }
    ElMessage.error(message)
  } finally {
    pageData.loading = false
  }
}
// //请求高德天气
// const gaodeWeather = async () => {
//   const res = await axios.get(
//     'https://restapi.amap.com/v3/weather/weatherInfo?key=07524791f0429ed4a2f5fa6c4f07f457&city=420100&extensions=all'
//   )
//   console.log(res)
// }
const fontClick = (data: any) => {
  if (data.children.length > 0) {
    router.push(data.children[0].children[0].menuUrl)
  }
}
const getReportListMenu = async () => {
  try {
    pageData.loading = true
    let { code, data, message } = await get({
      url: '/admin/acl/permission/getReportPermissionByUser',
    })
    if (code == 200) {
      let reportMenu: any = []
      data.list.forEach((item: any) => {
        reportMenu.push(item['permissionValue'])
      })
      pageData.reportMenuList = reportMenu
      console.log(pageData.reportMenuList)
      console.log(reportObList.value)
      pageData.loading = false
    } else {
      ElMessage.error(message)
    }
  } finally {
    pageData.loading = false
  }
}
function qxIfFunction(qxStr: any) {
  var qxList = qxStr.split(',')
  for (let i = 0; i < qxList.length; i++) {
    if (pageData.reportMenuList.includes(qxList[i])) {
      return true
    }
  }
  return false
}

const pwdData: any = reactive({
  curId: '',
  username: '',
  pwd: '',
  confirmPwd: '',
  changePwd: false,
  visiblePw: false,
})

//90天后 限制修改密码
const userTimeOut = async () => {
  let res = await get({
    url: 'admin/acl/user/userTimeOut?username=' + pwdData.username,
  })
  if (res.code === 200) {
    if (res.data.isTimeOut == 1) {
      pwdData.changePwd = true
      Message.warning({
        content: '请修改密码！',
        duration: 5000,
      })
    } else {
      pwdData.changePwd = false
    }
  } else {
    Message.error(res.message)
  }
}

const formRef: any = ref()
const changePasswordHandler = async () => {
  if (pwdData.pwd !== pwdData.confirmPwd) {
    Message.error({
      content: '两次输入密码不一样！',
      duration: 5000,
    })
    return
  }
  formRef.value?.validate().then((err: any) => {
    if (!err) {
      let pwd = md5(pwdData.pwd)
      //3,8,20,27
      const pwdarr = pwd.split('')
      pwdarr.splice(3, 0, 'a')
      pwdarr.splice(8, 0, 'b')
      pwdarr.splice(20, 0, 'a')
      pwdarr.splice(27, 0, 'b')
      pwd = pwdarr.join('')
      post({
        url: 'admin/acl/user/updateUserPassWord',
        data: {
          id: pwdData.curId,
          password: pwd,
        },
      }).then((res: any) => {
        if (res.code === 200) {
          pwdData.changePwd = false
          //弹出提示框
          pwdData.visiblePwd = true
          Message.success({
            content: '修改密码成功',
            duration: 5000,
          })
          return true
        } else {
          Message.error(res.message)
          return false
        }
      })
    }
  })
}

onMounted(() => {
  getUserInfo()
  // gaodeWeather()
  let menuList: any = sessionStorage.getItem('menuList')
  pageData.menuList = JSON.parse(menuList)
  // addressChange(address.value)
  getReportListMenu()
})
</script>
<style scoped>
.continter {
  background: #fff;
  height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.heightBox {
  width: 100%;
  height: 220px;
}

.flex {
  display: flex;
}

.back-fff {
  background: #f2f7ff;
}

.mr-20 {
  margin-right: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.h-left {
  justify-content: space-around;
  align-items: center;
}

/*.flexContain{*/
/*  width: 100px;*/
/*  height: 80px;*/
/*  display: flex;*/
/*  flex-wrap: wrap;*/
/*  align-items: center;*/
/*}*/

/* .h-right {

    } */
/* .hr-left {

    } */
/* .hr-right {

    } */
.w-50 {
  width: 50%;
  height: 100%;
}

.console {
  width: 100%;
  height: 100px;
  font-size: 16px;
  align-items: center;
  justify-content: flex-start;
}

.heightMain {
  width: 100%;
  height: 220px;
}

.statement {
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: space-around;
}

.runningAway {
  width: 100%;
  height: 50px;
  align-items: center;
  justify-content: start;
  color: #a8a8a8;
  padding-left: 30px;
}

.xinhao {
  color: #f60000;
  font-size: 16px;
  margin-right: 5px;
}

.avarat {
  width: 100px;
  height: 100px;
  /* border-radius: 50%; */
}

.ninkName {
  margin-left: 60px;
  font-size: 19px;
  margin-top: 10px;
  font-family: cursive;
  font-weight: 600;
}

:deep(.el-calendar__body) {
  padding: 0px 10px 0px;
  background: #f2f7ff;
}

:deep(.el-calendar-table .el-calendar-day) {
  height: 24px;
  text-align: center;
}

:deep(.el-calendar-table thead th) {
  padding: 5px 0;
}

:deep(.el-calendar__header) {
  padding: 5px 20px;
  background: #f2f7ff;
}

.cofont {
  font-size: 30px;
  /*margin: 0 30px;*/

  cursor: pointer;
  color: #8d8d8d !important;
}

.title-yuan {
  width: 8px;
  height: 8px;
  background: #fd5050;
  border-radius: 50%;
  margin-right: 15px;
}

.title-left {
  align-items: center;
  font-size: 18px;
}

.hm-left {
  padding: 30px;
}

.hm-right {
  padding: 30px;
}

.rw {
  margin: 20px 25px;
  font-size: 14px;
}

.tabjin {
  padding: 5px 8px;
  background: #eaeefb;
  color: #6685ff;
  font-weight: 600;
}

.huang {
  background: #fffaed;
  color: #eec241;
}

.hong {
  background: #fffaed;
  color: #eec241;
}

.lv {
  background: #f4faef;
  color: #6cb92b;
}

.ssd {
  font-size: 50px;
  color: #000;
}

.tianqi {
  justify-content: space-around;
  align-items: center;
  height: 81%;
  flex-flow: column wrap;
}

.address {
  margin: 5px 10px;
}

.weather {
  font-size: 18px;
  color: #000;
}

.evenly-center {
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  color: #000;
}

.IconFont:hover {
  transform: scale(1.2);
}

.IconFont {
  text-align: center;
  cursor: pointer;
  margin-left: 20px;
  padding: 5px;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover,
a:visited,
a:link,
a:active {
  color: #333;
}

.scrollbar-flex-content {
  display: flex;
  width: 10%;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 80px;
  margin: 10px;
  text-align: center;
  border-radius: 6px;
  background: #fff;
  color: #000;
}
</style>